<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>WebSocket Echo Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <script src="../plugins/vue/vue.js"></script>

    <script src="../plugins/vue/axios-0.18.0.js"></script>
    <script>


        var ws = new WebSocket("ws://localhost:8087/websocket");
        //连接开启
        ws.onopen = function (e) {
            console.log('Connection to server opened');
        }

function sendMessage(){
            ws.send();
}

       //发送信息
        ws.onmessage = function (evt) {
            var received_msg = evt.data;
            alert(received_msg);
        };
        //连接关闭
        ws.onclose = function(){
            // 关闭 websocket
            alert("连接已关闭...");
        };

        //连接错误
        ws.onerror = function(err) {

            alert("Error: " + err);
        };
    </script>
</head>

<body >
<div id="id" class="vertical-center">
    <div class="container">
        <p> </p>
        <form role="form" id="chat_form" onsubmit="sendMessage(); return false;">
            <div class="form-group">
                <input class="form-control" type="text" name="message" id="message"
                      v-modle="msg" placeholder="Type text to echo in here"  />
            </div>
            <button type="button" id="send" class="btn btn-primary"
                    onclick="sendMessage();">
                Send!
            </button>
        </form>
    </div>
</div>
<!--<script>-->
<!--    let vue = new Vue({-->
<!--        el:"#id",-->
<!--        data:{-->
<!--            msg:""-->
<!--        },-->
<!--        methods:{-->
<!--         sendMessage(){-->
<!--             let json = {"name":"zhangsan"};-->
<!--             ws.send(json);-->
<!--         }-->
<!--        }-->
<!--    });-->
<!--</script>-->
</body>
</html>